import React, { memo, useCallback, useState } from "react";

interface BasicProps {
  message?: string;
}

/**
 * useState
 * 模式：订阅发布模式
 * 场景：单组件内部，单一状态变更
 * 缺点：需要避免维护状态导致 props 引用变化的情况
 */
export const Basic = memo((props: BasicProps) => {
  const { message = "useState" } = props;
  const [count, setCount] = useState(() => 0);

  /**
   * 2. 持有不可变函数的引用。
   * 方式一：为了避免闭包影响，传递依赖变化项count， 内部使用 setCount(count + 1); 但是这种方式会导致函数引用会跟随 count 变化而变化
   * 方式二：使用 state 函数的方式
   */
  const handleIncrement = useCallback(() => {
    setCount((count) => count + 1);
  }, []);

  const handleDecrement = useCallback(() => {
    setCount((count) => count - 1);
  }, []);

  return (
    <div>
      <h1>{message}</h1>
      <p>{count}</p>
      <button onClick={handleIncrement}>+increment</button>
      <button onClick={handleDecrement}>-decrement</button>
    </div>
  );
});
